NoticeBar 组件

介绍

提供一个简单的 NoticeBar 框，用于展示信息通知栏。

用法

基本引入

// 1. 引入
import { FQNoticeBar } from "@fq/fq-weapp-ui";

组件依赖的样式文件（仅按需引用时需要）

import "@fq/fq-weapp-ui/dist/styles/components/notice-bar.scss";

基础用法

<FQNoticeBar content="Warning，警告类提示Warning" />
<FQNoticeBar content="Success，成功类提示" type="success" />
<FQNoticeBar content="Error，错误类提示" type="error" />

支持跳转

<FQNoticeBar
  type='error'
  content='Error，错误类提示'
  showLink
  onLinkClick={onLink}
/>

支持关闭

 <FQNoticeBar
    type='error'
    content='Error，错误类提示'
    closeable
    onClose={onClose}
  />

有按钮

 <FQNoticeBar
    content='Warning，警告类提示Warning'
    buttonProps={{
      children: '按钮文案',
    }}
    onLinkClick={onLink}
  />

按钮+关闭

 <FQNoticeBar
    content='Warning，警告类提示Warning'
    buttonProps={{
      type: 'secondary',
      children: '按钮文案',
      onClick: onLink,
    }}
    closeable
  />

跑马灯

 <FQNoticeBar
    content='跑马灯跑马灯跑马灯跑马灯跑123'
    scrollable
    speed={50}
    delay={1}
  />

信息通知栏-多行文本

// 换行
 <FQNoticeBar
    content='Success，成功类提示-支持换行支持换行支持换行支持换行支持换行支持换行支持换行支持换行支持换行支持换行'
    wrapable
    scrollable={false}
  />



// 有标题
   <FQNoticeBar
    headerTitle='标题文案'
    content='信息文本信息文本信息文本信息文本信息信息文本'
    wrapable
    scrollable={false}
  />


// 有标题+按钮
    <FQNoticeBar
      headerTitle='标题文案'
      content='信息文本信息文本信息文本'
      closeable
      wrapable
      buttonProps={{
        size: 'small',
        children: '去完善',
        onClick: onLink,
      }}
    />

API

属性

参数	说明	类型	可选值	默认值
content	通知文本内容	string	-	-
type	基本样式类型	string	error、success、warning	warning
basicStyles	基础类型样式	React.CSSProperties	-	-
leftIcon	左侧图标名称	ReactNode	-	-
showLink	显示连接箭头icon	boolean	-	false
buttonProps	传入的按钮属性	FQButtonProps	-	-
closeable	是否显示关闭按钮	boolean	-	false
wrapable	是否开启文本换行	boolean	-	false
scrollable	是否开启滚动播放，null 表示根据内容是否溢出自动判断	boolean | null	-	null
delay	滚动延迟时间（秒）	number	-	1
speed	滚动速度	number	-	50
loop	循环滚动次数 0 表示无限循环	number	-	0
headerTitle	标题文案	string	-	-
className	自定义样式类名	string	-	-
parentClassName	小程序查询节点的父级类名（复杂嵌套场景使用）	string	-	-

方法

函数名	说明	参数
onClick	点击整个栏目回调事件	-
onLinkClick	链接回调事件	-
onClose	关闭回调闭事件	-